<template>
<!-- 
  表单校验4个条件：
  1、给form组件绑定model属性
  2、给form组件绑定rules属性
  3、给form-item组件绑定prop属性
  4、给表单元素双向绑定
 -->
  <el-form ref="form" :model="formData" :rules="rules" class="form">
    <el-form-item prop="username">
      <el-input v-model="formData.username" placeholder="用户名手机"></el-input>
    </el-form-item>
    <el-form-item prop="captcha">
      <el-input v-model="formData.captcha" placeholder="验证码" >
        <template slot="append">
          <span @click="getCap">获取验证码</span>
        </template>
      </el-input>
    </el-form-item>
    <el-form-item prop="nickname">
      <el-input v-model="formData.nickname" placeholder="昵称"></el-input>
    </el-form-item>
    <el-form-item prop="password">
      <el-input v-model="formData.password" placeholder="密码"></el-input>
    </el-form-item>
    <el-form-item prop="checkPassword">
      <el-input v-model="formData.checkPassword" placeholder="确认密码"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button class="registerBtn" type="primary" @click="registerFn">注册</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
/***
 * 实现注册功能的思路
 * 1、获取到用户输入的注册信息 --- v-model来实现
 *  1-1、正常数据的获取
 *  1-2、验证码的获取
 * 2、给“注册”按钮绑定点击事件，声明事件处理函数
 * 3、注册的事件处理函数中调用接口，传入获取到的注册信息
 *    结果：成功
 *         失败
 * */ 
export default {
  data(){
    // 自定义校验 确认密码是否正确
    const checkPass = (rule, value, callback)=>{
      /**
       * rule: 当前的校验规则
       * value: 当前表单输入的值
       * callback：是一个函数，
       *    作用：
       *        当该函数判断校验"通过"的时候调用callback表示校验通过
       *        如果判断到校验"不通过"调用callback(错误提示) 表示校验不同
       *          注意：这里的“错误提示”将会显示在浏览器页面上
       * */ 
      if(value === this.formData.password){
        // 密码和确认密码相同 -- 校验通过
        callback()
      }else{
        // 校验不通过
        callback('两次输入密码不一致')
      }
    }
    return {
      formData: {
        username: "", // 手机号
        nickname: '', // 昵称
        captcha: '', // 手机验证码
        password: '', // 密码
        checkPassword: '', // 确认密码
      },
      rules:{
        username:[
          { required: true, message: '请输入手机号', trigger: 'blur' }
        ],
        nickname:[
          { required: true, message: '请输入昵称', trigger: 'blur' }
        ],
        captcha:[
          { required: true, message: '请输入验证码', trigger: 'blur' }
        ],
        password:[
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],
        checkPassword:[
          { required: true, message: '请输入确认密码', trigger: 'blur' },
          // validator 自定义校验规则
          { validator: checkPass, trigger: 'blur' }
        ],
      }
    }
  },
  methods: {
    // 注册
    registerFn(){
      console.log(this.formData);
      // 表单校验
      this.$refs.form.validate(bool=>{
        console.log(1231);
        if(bool){
          // 校验通过 调用接口实现注册并登录
          this.$axios({
            url: '/accounts/register',
            method: 'post',
            data: {
              username: this.formData.username,
              nickname: this.formData.nickname,
              captcha: this.formData.captcha,
              password: this.formData.password
            }
          }).then(res=>{
            // console.log(113,res);
            // 保存数据 --- vuex插件提供的方法
            this.$store.commit('user/setUserInfo',res.data)
            // 跳转到首页  -- 是vue-router插件提供的方法
            this.$router.replace('/')
            // 提示注册成功  --- 是elementUI提供的
            this.$message.success('注册成功')
          })
        }
      })
    },
    // 获取验证码
    getCap(){
      // 判断是否存在手机号码
      let reg = /^1[3-9]\d{9}$/ // 匹配手机号码的正则表达式
      console.log(104,this.formData.username);
      if(!reg.test(this.formData.username)){
        return this.$message.error('手机号码格式不正确！')
      }
      // 发送请求 传手机号码 获取验证码
      this.$axios({
        url: '/captchas',
        method: 'post',
        data: {
          tel: this.formData.username
        }
      }).then(res=>{
        // console.log(109,res);
        this.$confirm(`模拟手机接收验证码为: ${res.data.code}`,'提示')
      })
    }
  }
}
</script>
<style lang="less" scoped>
.form{
  padding: 25px;
}
.registerBtn{
  width: 100%;
}
</style>